<!DOCTYPE html>
<html>
<head>
	<title>交易详情页</title>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />  
</head>
<body style="padding-top: 50px;">

	<div class="col-lg-12">
		<div class="col-lg-12">
			<div class="panel panel-info col-lg-12">
				<div class="panel-title">
					<h5 style="display: inline-block;">查询参数</h5>
					<button class="btn btn-info btn-sm col-lg-2 pull-right"><a href="index.html">返回主页</a></button>
				</div>
				<div class="panel-body">
					<div class="form-group form-inline col-lg-12">
						<label class="control-label col-lg-2 text-right">网络：</label>
						<select id="net" class="form-control col-lg-3">
							<option value="mainnet" selected="selected">主网</option>
							<option value="rinkeby">测试</option>
						</select>
						<label class="control-label col-lg-2 text-right">请输入地址：</label>
						<input type="text" class="form-control col-lg-5" id="addr" placeholder="请输入查询地址">
						<button id="detailBtn" class="btn btn-info col-lg-1 col-lg-offset-1">查询</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-12">
		<div class="col-lg-12">
			<div class="panel panel-info col-lg-12">
				<div class="panel-title">
					<h5>查询结果</h5>
				</div>
				<div class="panel-body" id="res">
					
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/web3.min.js"></script>
	<script type="text/javascript">
		var config = {
			net: ['https://mainnet.infura.io/v3/', 'https://rinkeby.infura.io/v3/'],
			scan: ['https://etherscan.io/', 'https://rinkeby.etherscan.io/'],
			api: ['http://api.etherscan.io/api', 'http://api-rinkeby.etherscan.io/api'],
		}
		var net = 'https://mainnet.infura.io/v3/';

		var scan = 'https://etherscan.io/';

		var url = 'http://api.etherscan.io/api';
		
		var apikey = 'c1320f9466a44eb892740d0b7033a7c3';

		if (typeof web3 !== 'undefined') {
		    web3 = new Web3(web3.currentProvider);
		} else {
		    web3 = new Web3(new Web3.providers.HttpProvider(net + apikey));
		}

		$('#net').change(function() {
			var selected = $(this).children('option:selected').val();
			console.log(selected);
			if (selected == 'rinkeby') {
				net = config.net[1];
				scan = config.scan[1];
				url = config.api[1];
				getBlockNumber();
			} else {
				net = config.net[0];
				scan = config.scan[0];
				url = config.api[0];
				getBlockNumber();
			}
			console.log(net);
			console.log(scan);
			console.log(url);
		})

		
		var data = {
			module: 'account',
			action: 'txlist',
			address: '',
			startblock: 0,
			endblock: 0,
			sort: 'desc',
			apikey: 'c1320f9466a44eb892740d0b7033a7c3'
		}

		var getBlockNumber = () => {
			web3.eth.getBlockNumber().then(num => {
				data.endblock = num;
			});
		}
		getBlockNumber();

		var blockUrl = 'block/';
		var txUrl = 'tx/';
		var addrUrl = 'address/';

		$('#detailBtn').click(function(event) {

			var address = $('#addr').val();
			if (address === '') {
				alert('请输入地址');
				return false;
			}
			data.address = address;
			$.get(url, data, res => {
				console.log(res);
				if (res.status !== '1') {
					alert('请求异常');
					return false;
				}
				$('#res').html('');
				var html = `<table class="table table-bordered">
								<thead><tr>
									<th>block</th>
									<th>hash</th>
									<th>from</th>
									<th>to</th>
									<th>value</th>
									<th>contractAddress</th>
									<th>gasUsed</th>
								</tr></thead>
								<tbody>`;
								// <th>contractAddress</th>
				res.result.forEach( function(data, index) {
					var eth = web3.utils.fromWei(data.value, 'ether');
					html += `<tr>
								<td><a target="_blank" href="${scan+blockUrl+data.blockNumber}">${data.blockNumber}</a></td>
								<td><a target="_blank" href="${scan+txUrl+data.hash}">${data.hash.substring(0, 40)}</a></td>
								<td><a target="_blank" href="${scan+addrUrl+data.from}">${data.from}</a></td>
								<td><a target="_blank" href="${scan+addrUrl+data.to}">${data.to}</a></td>
								<td>${eth}</td>
								<td><a target="_blank" href="${addrUrl+data.contractAddress}">${data.contractAddress}</a></td>
								<td>${data.gasUsed}</td>
							 </tr>`;
							 // <td>${data.contractAddress}</td>
				});
				html += `</tbody></table>`;
				$('#res').append(html);
			})
		});
	</script>
</body>
</html>